<template>
  <div class="getlist">
 
    <div class="ilis">
      <div class="title">
         <h3>推荐歌单</h3>
         
         <a href="#">更多&gt;</a>
      </div>
      <hr>
    <div class="main">

       <router-link
         tag="div"
        :to="`/mounts/${itm.id}`"
       

        class="itm" v-for="itm in list" :key="itm.userId">
          <div class="imgs">
            <img v-lazy="itm.picUrl" alt="">
          </div>
          <div class="tit">{{itm.name}}</div>
         
       </router-link>

      
    </div>
    </div>
<!-- ///////////////////////////////////////// -->
     <div class="ilis">
      <div class="title">
         <h3>优质歌曲</h3>
         
         <a href="#">更多></a>
      </div>
       <hr>
    <div class="main">
       <router-link 
       tag="div"
       :to="`/play/${itms.id}`"
       
       class="itm" v-for="itms in lists" :key="itms.id">
          <div class="imgs">
            <img v-lazy="itms.picUrl" alt="">
          </div>
          <div class="tit">{{itms.name}}</div>
       </router-link>
    </div>

    </div>

  </div>
</template>
<script>


export default {
   name:'Getlist',
  data() {
    return{
      list:[],
      lists:[]
    } 
  },
  created(){
 
    this.getlist()
    this.getlists()
  },
  methods:{
   
   getlist(){
    
      this.$http.get('/api/recommend/resource').then(res=>{
        // console.log('歌单',res.data.recommend);
        this.list=res.data.recommend

      },
      )
   },
   getlists(){
     this.$http.get('/api/personalized/newsong').then(res=>{
      //  console.log('gequ',res.data.result);
       this.lists=res.data.result
       this.$store.commit('getlist',res.data.result)
      
      
     })
   }
  }
}
</script>


<style lang="less" scoped>

.getlist{
  padding: 5px;
  background-color: rgb(230, 227, 227);
  hr{
    
    color: rgb(226, 218, 218);
  }
  .ilis{
    
    padding: 10px 17px;
    background-color: rgb(37, 36, 36);
    margin-bottom: 10px;
    color: white;
    .title{
      display: flex;
      margin: 14px 0 18px;
    }
    .title h3{
      flex: 1;
      display: block;
      font-weight: 700;
      font-size: 20px;
    }
  }
}
.main{
   margin-left: 10px;
  display: flex;
  flex-wrap: wrap;
}
.itm{
 
  margin: 1px;
  width: 110px;
  height: 150px;
  .imgs img{
     width: 100px;
     height: 100px;
  }
  .tit{
    height: 20px;
overflow: hidden;
text-overflow: ellipsis;

white-space:nowrap;/* 不换行 */

  }












}

</style>
